<!--
 * @Author: 云风 1558003416@qq.com
 * @Date: 2022-05-13 11:54:23
 * @LastEditors: 云风 1558003416@qq.com
 * @LastEditTime: 2022-05-16 10:38:35
 * @FilePath: \vue3_admin_jinxu\src\views\dynamicchart\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="echarts_box my-scorll">
    <!-- <div id="myChart" :style="{ width: '300px', height: '300px' }"></div> -->
    <EchartsItem
      v-for="(item, index) in teatArr"
      :key="item.otype"
      :setOptionObj="item"
      :style="{
        width: itemSetClass(teatArr.length, index),
        height: itemSetHightClass(teatArr.length),
      }"
      @change="changeE"
      ref="EchartsItemDom"
    ></EchartsItem>
    <Amplifier
      v-model:visible="visibleAmp"
      v-model:echartsItems="echartsItemDate"
    ></Amplifier>
  </div>
</template>

<script setup>
import { watch, reactive, getCurrentInstance, ref } from "vue";
import EchartsItem from "./components/echartsItem.vue";
import Amplifier from "./components/amplifier.vue";
let tempArr = require("./components/date.json");
let teatArr = reactive(tempArr);
let echartsItemDate = reactive({});
let visibleAmp = ref(false);
// console.log(teatArr);
const EchartsItemDom = ref(null);

//解构赋值 设置别名that  也可不写  :that  直接ctx
let { ctx: that } = getCurrentInstance();
// 监听数据源的改变
watch(teatArr, (enw) => {
  // console.log(enw);
  // console.log(EchartsItemDom, ">>>>>>>>><<<<<<<<");
  // console.log(that, ">>>>>>>>><<<<<<<<");
  // console.log(that.$refs.EchartsItemDom, ">>>>>>>>><<<<<<<<");
  // 处理子组件 echarts 不动态刷新的问题
  that.$refs.EchartsItemDom.forEach((i) => {
    that.$nextTick(() => {
      i.resetWidth();
    });
  });
});

// 添加图表自适应
// 设置高度
function itemSetHightClass(leng, index) {
  if (leng == 1) {
    return "100%";
  } else if (leng < 7) {
    return "50%";
  } else {
    return "33%";
  }
}

// 设置宽度
function itemSetClass(leng, index) {
  /**leng  数组的长度
   * index 当前的下标
   */
  if (leng % 3 == 0) {
    // 0 3 6 9 12 15
    // return "box-item-3";
    return "33%";
  } else if (leng % 3 == 1) {
    if (leng == 1) {
      // 1
      // return "box-item-1";
      return "100%";
    } else {
      // 4 7 10 13
      if (leng - (index + 1) < 4) {
        // return "box-item-2";
        return "50%";
      } else {
        // return "box-item-3";
        return "33%";
      }
    }
  } else {
    // 2 5 8 11 14
    if (leng - (index + 1) == 1 || leng - (index + 1) == 0) {
      // return "box-item-2";
      return "50%";
    } else {
      // return "box-item-3";
      return "33%";
    }
  }
}

function changeE(data, type) {
  // console.log(data, type, ">>>>>>>>");
  if (type == "del") {
    // console.log(teatArr);
    let index = teatArr.findIndex((i) => i.otype == data);
    teatArr.splice(index, 1);
  } else if (type == "sx") {
    // console.log(teatArr.find((i) => i.otype == data));
    let tempEcharts = teatArr.find((i) => i.otype == data);
    //  reactive 重新赋值 会存在失去双向数据绑定  要使用assign 进行对象合并
    Object.assign(echartsItemDate, tempEcharts);
    // echartsItemDate = tempEcharts;
    visibleAmp.value = true;
    // console.log(echartsItemDate);
  }
}
</script>

<style scoped>
.chart {
  height: 400px;
}
.echarts_box {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.app_main::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.app_main::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 2px;
}
.app_main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.app_main::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 74, 82, 0.7);
}
</style>
